In this example, we will explain how to bind a DropDownList in ASP.NET using VB.Net and C#.
To better understand this tutorial, you should be familiar with the following topics:
DataBase
First, let’s create a database table called “ProgrammingLanguages”:
Then add a few records to that table:
Now create a visual studio project, and then add a Label and DropDownList to the Default page.
In this example, we will use the following properties of the DropdownList control:
DataSource: To set the data source for the control.
DataValueField: Used to set the filed from the data source that will provide the value of the DropDownList items.
DataTextField: To set the field from the data source that will provide the text content of the DropDownList items. This property is what will be visible to the users.
HTML
<asp:Label ID="lbl" runat="server" Text="Programming Language:"></asp:Label> <asp:DropDownList ID="ddl_Languages" runat="server" Height="17px" Width="300px"> </asp:DropDownList>
When the page loads, the DropDownList will be populated with the table ProgrammingLanguages from the SQL Server Database TutorialsPanel using the code below:
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then Dim sqlconn As New SqlConnection("Data Source=YourDataServer;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False") Dim da As New SqlDataAdapter Dim cmd As New SqlCommand("Select * FROM ProgrammingLanguage Order by LanguageName ASC") Dim dtLanguages As New DataTable da.SelectCommand = cmd da.SelectCommand.Connection = sqlconn da.Fill(dtLanguages) ddl_Languages.DataSource = dtLanguages ddl_Languages.DataTextField = "LanguageName" ddl_Languages.DataValueField = "ID" ddl_Languages.DataBind() End If End Sub
C#
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { SqlConnection sqlconn = new SqlConnection("Data Source=YourDataServer;Initial Catalog=TutorialsPanel;Integrated Security=True;Pooling=False"); SqlDataAdapter da = new SqlDataAdapter(); SqlCommand cmd = new SqlCommand("Select * FROM ProgrammingLanguage Order by LanguageName"); DataTable dtLanguages = new DataTable(); da.SelectCommand = cmd; da.SelectCommand.Connection = sqlconn; da.Fill(dtLanguages); ddl_Languages.DataSource = dtLanguages; ddl_Languages.DataTextField = "LanguageName"; ddl_Languages.DataValueField = "ID"; ddl_Languages.DataBind(); } }
Now let’s show an alert when the user selects an item from the DropDownList. To do so, we can need to put the code in the SelectedIndexChanged event block:
VB.NET
Protected Sub ddl_Languages_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddl_Languages.SelectedIndexChanged Dim msg As String = ddl_Languages.SelectedItem.Text ScriptManager.RegisterClientScriptBlock(TryCast(sender, Control), Me.GetType(), "alert", "alert('" + msg + "')", True) End Sub
C#
protected void ddl_Languages_SelectedIndexChanged(object sender, EventArgs e) { string msg = ddl_Languages.SelectedItem.Text; ScriptManager.RegisterClientScriptBlock(sender as Control, this.GetType(), "alert", "alert('" + msg + "')", true); }
Don’t forget to set the AutoPostBack Property of the DropDownList to True:
To prevent the page from a full postback when selecting an item from the DropDownList, add an Ajax UpdatePanel Control to trigger partial feedback:
HTML
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Label ID="lbl" runat="server" Text="Programming Language:"></asp:Label> <asp:DropDownList ID="ddl_Languages" runat="server" Height="17px" Width="301px" AutoPostBack="True"> </asp:DropDownList> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddl_Languages" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel>
Now run the application.
Comments